<template>
	<view class="pubilsh">
		<view class="title">
			<input type="text" placeholder="请编辑Blog的标题" v-model="blog.title">
		</view>
		<view class="content">
			<editor placeholder="请编辑Blog的内容" class="myEdit" show-img-size show-img-toolbar show-img-resize
				@ready="onEitReady" @focus="onFous" @statuschange="statechange"></editor>
		</view>
		<view class="btnPub">
			<u-button 从type="default" color="#2ac2d1" text="确认发表" @click="onSubmit"></u-button>
		</view>
		<view class="tool" :class="showtool">
			<view class="item" v-for="(item,index) in toolArr" :key="index">
				<text :class="` iconfont ${item.icon} ${item.show?'active':''}`" @click="item.click()"></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from "vue";

	import {
		getImgSrc,
		getProvince
	} from '@/utils/tool.js'

	const db = uniCloud.database()

	let {
		ctx
	} = getCurrentInstance()
	const showtool = ref()

	const blog = reactive({
		title: '',
		content: '',
		description: '',
		picurls: [],
		province: ''
	})

	const toolArr = reactive([{
			icon: 'icon-zitibiaoti',
			value: 'header',
			show: false,
			click: () => {
				ctx.editorCtx.format('header', 'H3')
			}
		},
		{
			icon: 'icon-jiacu',
			value: 'bold',
			show: false,
			click: () => {
				ctx.editorCtx.format('bold')
			}
		},
		{
			icon: 'icon-xieti',
			value: 'italic',
			show: false,
			click: () => {
				ctx.editorCtx.format('italic')
			}
		},
		{
			icon: 'icon-shuipingfengexian',
			click: () => {
				ctx.editorCtx.insertDivider()
			}
		},
		{
			icon: 'icon-charutupian',
			click: () => {

				/*#ifdef MP*/
				uni.chooseMessageFile({
					count: 3,
					success: async (res) => {
						for (let item of res.tempFiles) {
							let res = await uniCloud.uploadFile({
								cloudPath: item.name,
								filePath: item.path
							})
							ctx.editorCtx.insertImage({
								src: res.fileID
							})
						}
					}
				})
				/*#endif*/

				/*#ifdef H5*/
				uni.chooseFile({
					count: 3,
					success: async (res) => {
						for (let item of res.tempFiles) {
							let res = await uniCloud.uploadFile({
								cloudPath: item.name,
								filePath: item.path
							})
							ctx.editorCtx.insertImage({
								src: res.fileID
							})
						}
					}
				})
				/*#endif*/
			}
		},
		{
			icon: 'icon-duigou',
			click: () => {
				showtool.value = 'down'
			}
		}
	])

	const onEitReady = () => {
		uni.createSelectorQuery().in(ctx).select('.myEdit').fields({
			size: true,
			context: true
		}, res => {
			ctx.editorCtx = res.context
		}).exec()
	}

	const onFous = () => {
		showtool.value = 'up'
	}

	const statechange = (e) => {
		let detail = e.detail
		for (var i = 0; i < 3; i++) {
			if (detail.hasOwnProperty(toolArr[i].value)) {
				toolArr[i].show = true
			} else {
				toolArr[i].show = false
			}
		}
	}

	const onSubmit = () => {
		ctx.editorCtx.getContents({
			success: async (res) => {
				blog.content = res.html
				blog.description = res.text.slice(0, 80)
				blog.picurls = getImgSrc(res.html)
				blog.province = await getProvince()
				uni.showLoading({
					mask: true,
					title: '发布中...'
				})
				db.collection('blog').add(blog).then(res => {
					if (res) {
						uni.hideLoading();
						if (res.result.id) {
							blog.title = ''
							ctx.editorCtx.clear()
							uni.showToast({
								title: '发布成功',
								mask: true
							})
							setTimeout(()=>{
								uni.reLaunch({
									url: '/pages/index/index'
								})
							},1000)
						} else {
							uni.showToast({
								title: '发布失败',
								mask: true
							})
						}
					}
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	::v-deep .ql-blank::before {
		font-style: normal !important;
	}

	.pubilsh {
		margin: 0 10rpx;
		display: flex;
		flex-direction: column;
		height: 100%;

		.title {
			margin-top: 20rpx;
			width: 100%;
			height: 80rpx;
			border-bottom: 1px solid #d7d6e2;

			input {
				height: 100%;
				font-size: 50rpx;
				font-weight: 550;
			}
		}

		.content {
			.myEdit {
				height: 100%;
			}

			margin-top: 20rpx;
			flex: 1;
		}

		.btnPub {
			width: 90%;
			position: fixed;
			left: 5%;
			bottom: 120rpx;
		}

		.tool {
			width: 100%;
			display: flex;
			position: fixed;
			left: 0;
			bottom: 0;
			transform: translateY(100rpx);

			.item {
				width: 50rpx;
				height: 50rpx;
				margin: 30rpx calc((100% - 6 * 50rpx) / 6 / 2);

				.iconfont {
					font-size: 50rpx;

					&.active {
						color: #2ac2d1;
					}
				}
			}

			&.up {
				animation: 1s linear uptool forwards;
			}

			&.down {
				animation: 1s linear downtool forwards;
			}
		}
	}

	@keyframes uptool {
		0% {
			transform: translateY(100rpx);
		}

		25% {
			transform: translateY(75rpx);
		}

		50% {
			transform: translateY(50rpx);
		}

		75% {
			transform: translateY(25rpx);
		}

		100% {
			transform: translateY(0rpx);
		}
	}

	@keyframes downtool {
		0% {
			transform: translateY(0rpx);
		}

		25% {
			transform: translateY(25rpx);
		}

		50% {
			transform: translateY(50rpx);
		}

		75% {
			transform: translateY(75rpx);
		}

		100% {
			transform: translateY(100rpx);
		}
	}
</style>